<template>
  <div id="app">
<!--    <router-link to="/">Home</router-link>-->
<!--    |-->
<!--    <router-link to="/about">About</router-link>-->
<!--    |-->
<!--    <router-link to="/element">Element</router-link>-->
<!--    |-->
<!--    <router-link to="/axios">Axios</router-link>-->
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'app',
};
</script>

<style lang="scss">
  @import "./style/default/variable";

  /* css reset */

  * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  html,
  body {
    height: 100%;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB",
    "Microsoft YaHei","微软雅黑",Arial,sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    line-height: 1;
    font-size: $font12;
    color: $gray;
  }

  /* HTML5 display-role reset for older browsers */
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }

  ol,
  ul {
    list-style: none;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  i {
    font-style: normal;
  }

  img {
    max-width: 100%;
    vertical-align: middle;
  }

  /* display */

  @each $type in block, inline-block {
    .#{$type} {
      display: #{$type};
    }
  }

  /* float */

  .clearfix:after {
    content: "";
    height: 0;
    display: block;
    clear: both;
  }

  @each $direction in left, right {
    .#{$direction},
    .pull-#{$direction} {
      float: #{$direction};
    }
  }
  /* font-size */

  @for $i from 12 through 24 {
    .font-#{$i} { font-size: $i + px; }
  }

  /* margin-top */

  @for $i from 1 through 10 {
    .mt-#{$i*5} { margin-top: $i * 5 + px !important; }
  }

  /* margin-bottom */

  @for $i from 1 through 10 {
    .mb-#{$i*5} { margin-bottom: $i * 5 + px !important; }
  }

  /* margin-left */

  @for $i from 1 through 10 {
    .ml-#{$i*5} { margin-left: $i * 5 + px !important; }
  }

  /* margin-right */

  @for $i from 1 through 10 {
    .mr-#{$i*5} { margin-right: $i * 5 + px !important; }
  }

  /* text-align */

  @each $direction in left, center, right {
    .text-#{$direction} {
      text-align: #{$direction};
    }
  }
  /* cursor */
  .pointer {
    cursor: pointer;
  }
</style>
